<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%
request.setCharacterEncoding("utf-8");
%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!-- 引入Bootstrap框架 -->
<%-- <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/pcsofangche/source/bootstrap-3.3.7-dist/css/bootstrap.min.css"/>
<script src="${pageContext.request.contextPath}/static/pcsofangche/source/jquery-3.2.1/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="${pageContext.request.contextPath}/static/pcsofangche/source/bootstrap-3.3.7-dist/js/bootstrap.min.js" type="text/javascript"
 charset="utf-8"></script> --%>
<jsp:include page="../../common/meta/meta.jsp"></jsp:include>


<!-- 引入页面css -->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/pcsofangche/my/myorderlist/myorderlist.css" />
<!-- 引入步骤条样式 -->
<link rel="stylesheet" href="http://at.alicdn.com/t/font_869091_0ezmykusk5v.css">
<!-- 引入页面js -->
<script src="${pageContext.request.contextPath}/static/pcsofangche/my/myorderlist/myorderlist.js" type="text/javascript"
 charset="utf-8"></script>
<!-- 引入模板引擎 -->
<script src="${pageContext.request.contextPath}/static/pcsofangche/source/art-template/template-web.js"></script>
<!-- jquery上传插件 -->
<script src="${pageContext.request.contextPath}/static/pcsofangche/source/ajaxFileUpload/ajaxFileUpload.js"></script>

<div class="all_head">
	<div class="all_head_topone"></div>
	<div class="all_head_toptwo"></div>
	<div class="all_head_content">
		<jsp:include page="../../common/allhead/allhead.jsp"></jsp:include>
	</div>
</div>
<div class="container">
	<div class="mol">
		<div class="row">
			<div class="col-lg-2 col-md-2">
				<div class="mol_left">
					<div class="mol_left_item">会员主页</div>
					<div class="mol_left_item">我的订单</div>
					<div class="mol_left_item_item">全部订单</div>
					<div class="mol_left_item_item">房车租赁</div>
					<div class="mol_left_item_item">房车旅行</div>
					<div class="mol_left_item">个人中心</div>
					<!-- <div class="mol_left_item_item">消息提醒</div> -->
					<div class="mol_left_item_item">我的信息</div>
					<div class="mol_left_item_item">常用信息</div>
					<div class="mol_left_item_item">密码修改</div>
					<div class="mol_left_item_item">绑定与关联</div>
				</div>
			</div>
			<div class="col-lg-10 col-md-10 mol_right">
				<div class="mol_right_one"></div>
				<div class="mol_right_two clearfix">

					<div class="mol_right_two_item mol_right_two_itemchoose">全部</div>
					<div class="mol_right_two_item">待付款</div>
					<div class="mol_right_two_item">确认中</div>
					<div class="mol_right_two_item">预定成功</div>

				</div>
				<div class="mol_right_three">
				</div>
				<!-- 页码 -->
				<div class=" mol_right_four">
					<div class="mol_right_four_item center-block clearfix">
						<div class="mol_right_four_item_item">1</div>
					</div>
				</div>
			</div>

			<!-- 个人中心 --个人信息 -->
			<div class="col-lg-10 col-md-10 mol_right_info">
				<div class="per_show" style="display:block">
					<div class="mol_right_setting_top">
						<h1>个人信息</h1>
					</div>
					<div class="personal_one" id="personal_one">
						<!-- TODO  one-->
					</div>
				</div>
				<!-- 修改手机 -->
				<div class="aletr_phone" style="display:none">
					<div class="mol_right_setting_top">
						<h1>修改手机</h1>
					</div>
					<div class="panle .clearfix">
						<ul class="step clearfix">
							<li class="step__item step__item_active">
								<!-- <i class="step__item_icon iconfont icon-wancheng"></i> -->
								<i class="step__item_step">1</i>
								<span>填写新手机</span>
							</li>
							<li class="step__item">
								<i class="step__item_step">2</i>
								<span>验证新手机</span>
							</li>
							<li class="step__item">
								<i class="step__item_step">3</i>
								<span>完成</span>
							</li>
						</ul>
						<!-- 验证方式 -->
						<div class="verify_mode">
							<div class="part part1" style="display:block">
								<div class="personal-form_line">
									<span class="new_hao">新手机：</span>
									<input type="text" class="new_phone" placeholder="请输入新手机">
								</div>
							</div>
							<div class="part part2" style="display:none">
								<div class="personal-form_line">
									<span class="new_hao">验证码：</span>
									<input type="text" class="code" placeholder="请输入验证码">
								</div>
							</div>
							<div class="part part3" style="display:none">
									3
							</div>

						</div>
						<div class="btn_elect">
							<button class="btn__cencel">取消</button>
							<button class="btn__prev">上一步</button>
							<button class="btn__next">下一步</button>
						</div>
					</div>
				</div>
			</div>

			<!-- 个人中心 --常用信息  -->
			<div class="col-lg-10 col-md-10 mol_right_common">
				<div id="common_info" style="display:block" class="clearfix">
					<div class="mol_right_setting_top">
						<h1>常用信息</h1>
					</div>
					<div class="new_btn_info"> + 新 增</div>
					<div class="containet_info">
						<ul id="linkman" class="pageMain">
							<!-- TODO -->
						</ul>
					</div>

					<!-- 页码 -->
					<div id="common_page" class="common_page">
						<span id="prev">上一页</span>
						<ul id="pageNav">
							<a>1</a>
							<a>2</a>
							<a>3</a>
							<a>4</a>
							<a>5</a>
						</ul>
						<span id="next">下一页</span>
						<!-- <div class="page_total">共5页</div> -->
					</div>
				</div>
				<div id="new_common_info" style="display:none">
					<div class="mol_right_setting_top">
						<h1>新增常用信息</h1>
					</div>
					<div class="news_common_info">
						<form class="form-horizontal" id="newly_common">
							<div class="form-group">
								<label for="inputEmail3" class="col-sm-2 control-label">姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名 ：</label>
								<div class="col-sm-10">
									<input name="cname" type="name" class="form-control">
								</div>
							</div>
							<div class="form-group">
								<div class="col-sm-offset-2 col-sm-10">
									<div class="checkbox">
										<label class="radio-inline">
											<input type="radio" name="sex" value="男"> 先生
										</label>
										<label class="radio-inline">
											<input type="radio" name="sex" value="女"> 女士
										</label>
									</div>
								</div>
							</div>
							<div class="form-group">
								<label for="inputEmail3" class="col-sm-2 control-label">出生年月 ：</label>
								<div class="col-sm-10" name="birthdate">
									<select name="year">
										<option>1996</option>
										<option>1997</option>
										<option>1998</option>
									</select>年
									<select name="month">
										<option>4</option>
										<option>5</option>
									</select>月
									<select name="day">
										<option>20</option>
										<option>30</option>
									</select>日
								</div>
							</div>
							<div class="form-group">
								<label for="inputEmail3" class="col-sm-2 control-label">证据类型 ：</label>
								<div class="col-sm-10">
									<select id="nian" name="identtype">
										<option>身份证</option>
										<option>户口本</option>
										<option>护照</option>
									</select>
								</div>
							</div>
							<div class="form-group">
								<label for="inputEmail3" class="col-sm-2 control-label">证件号码 ：</label>
								<div class="col-sm-10">
									<input name="identnum" type="name" class="form-control">
								</div>
							</div>
							<div class="form-group">
								<label for="inputEmail3" class="col-sm-2 control-label">手机号码 ：</label>
								<div class="col-sm-10">
									<input name="phone" type="name" class="form-control">
								</div>
							</div>
							<div class="form-group">
								<label for="inputEmail3" class="col-sm-2 control-label">电子邮箱 ：</label>
								<div class="col-sm-10">
									<input name="email" type="name" class="form-control">
								</div>
							</div>
							<div class="btn_last">
								<label class="col-sm-2" class="no_before"></label>
								<div class="col-sm-10 new_btn">
									<span class="news_sava" id="news_save">保存</span>
									<span class="news_cancel">取消</span>
								</div>
							</div>
						</form>
					</div>
				</div>
				<div id="xg_common_info" style="display:none">
					<div class="mol_right_setting_top">
						<h1>修改常用信息</h1>
					</div>
					<div class="news_common_info" id="common_i">
						<!-- TODO common -->
					</div>
				</div>

				<!-- 删除提示模态框 -->
				<div class="modal fade" tabindex="-1" id="myModal">
					<div class="modal-dialog">
						<div class="modal-content">
							<div class="modal-header">
								<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
								<h4 class="modal-title">温馨提示</h4>
							</div>
							<div class="modal-body">
								<span class="model-tips">i</span>
								<p>是否删除该联系人</p>
							</div>
							<div class="modal-footer">
								<button type="button" class="btn btn-default" data-dismiss="modal">否</button>
								<button id="remove_btn" type="button" class="btn btn-primary">是</button>
							</div>
						</div><!-- /.modal-content -->
					</div><!-- /.modal-dialog -->
				</div><!-- /.modal -->
			</div>

			<!-- 个人中心 --账户设置 -->
			<div class="col-lg-10 col-md-10 mol_right_setting">
				<div class="mol_right_setting_top">
					<h1>账户设置</h1>
				</div>
				<div class="mol_right_setting_bottom">
					<p>修改登录密码</p>
					<div class="setting_form">
						<form class="form-horizontal" autocomplete="new-password">
							<div class="form-group">
								<label for="inputEmail3" class="col-sm-2 control-label">当前密码：</label>
								<div class="col-sm-10">
									<input id="old_pwd" name="oldPwd" type="password" class="form-control" autocomplete="new-password">
								</div>
							</div>
							<div class="form-group">
								<label for="inputPassword3" class="col-sm-2 control-label">新密码：</label>
								<div class="col-sm-10">
									<input id="set_pwd" name="newPwd" type="password" class="form-control" autocomplete="new-password">
									<div id="pwd_dengji">
										<span></span>
										<span></span>
										<span></span>
									</div>
								</div>
							</div>
							<div class="form-group">
								<label for="inputPassword3" class="col-sm-2 control-label">确认新密码：</label>
								<div class="col-sm-10">
									<input id="new_pwd" name="confPwd" type="password" class="form-control" autocomplete="new-password">
									<div id="new_msg" class="new_msg">俩次密码不一致</div>
								</div>
							</div>
							<div class="form-group">
								<label for="inputPassword3" class="col-sm-2 control-label"></label>
								<div class="col-sm-10">
									<input type="submit" class="sava_password" value="保存">
								</div>
							</div>
						</form>
					</div>

				</div>
			</div>

			<!-- 个人中心 --绑定与关联-->
			<div class="col-lg-10 col-md-10 mol_right_personal">
			<!-- 	<div class="bang_top">
					<h1 class="personal_relevance">绑定与关联</h1>
					<div class="relevance_tip">
						<span class="relevance_close">i</span>
						<p class="">设定绑定同步，绑定第三方网站，可以使用第三方账号直接登录</p>
					</div>
					<div class="bang_Account">
						<div class="bang_icon">
							<img src="${pageContext.request.contextPath}/static/pcsofangche/my/myorderlist/img/qq.png" alt="">
							<span>QQ</span>
						</div>
						<div class="bang_Account_btn">绑定账号</div>
					</div>
					<div class="bang_Account">
						<div class="bang_icon">
							<img src="${pageContext.request.contextPath}/static/pcsofangche/my/myorderlist/img/weChat.png" alt="">
							<span>微信</span>
						</div>
						<div class="bang_Account_btn">绑定账号</div>
					</div>
				</div>
 -->				<div class="bang_bottom">
					<h1 class="personal_relevance">搜房车小程序</h1>
					<div class="relevance_tip">
						<p class="">可方便您查询订单及积分信息</p>
					</div>
					<div class="bang_qr clearfix">
						<img src="${pageContext.request.contextPath}/static/pcsofangche/my/myorderlist/img/code.png" alt="">
						<div class="bang_qr_p">
							<p>① 绑定小程序</p>
							<p>② 点击"我的"——"查看全部订单"</p>
						</div>
					</div>
				</div>
			</div>

		</div>
	</div>
</div>

<div class="all_slide">
	<jsp:include page="../../common/allside/allside.jsp"></jsp:include>
</div>
<div class="all_foot">
	<jsp:include page="../../common/allfoot/allfoot.jsp"></jsp:include>
</div>
<!-- TODO 个人信息one -->
<script type="text/template" id="one">
	<form method="post" class="personal-form">
		<div class="personal-form_line">
			<span>头像：</span>
			<div class="personal-form_avatar">
				<img  id="pic" name="mineImg" src="{{pcHeadImg}}" alt="" class="personal-form_pic" >
				<input type="hidden" name="pcHeadImg" value="{{pcHeadImg}}" class="pcHeadImg">
				<label class="personal-form_avatar-btn edit-active">
				<input id="upload" name="file" type="file" class="personal-form_avatar-input"  style="display:none">编辑
				</label>
			</div>
		</div>
		<div class="personal-form_line">
			<span>昵称：</span>
			<span class="preview-active">{{nick}}</span>
			<input type="text" name="nick" class="personal-form_input edit-active" value="{{nick}}">
		</div>
		<div class="personal-form_line">
			<span>姓名：</span>
			<span class="preview-active">{{realName}}</span>
			<input type="text" name="realname" class="personal-form_input edit-active" value="{{realName}}">
		</div>
		<div class="personal-form_line">
			<span>性别：</span>
			<span class="preview-active">{{gender}}</span>
			<div class="edit-active">
				<label class="edit_sex" >
					<input type="radio" name="gender" value="男" {{ gender =='男'? "checked" : "" }}>男
				</label>
				<label class="edit_sex" >
					<input type="radio" name="gender" value="女" {{ gender =='女'? "checked" : "" }}>女
				</label>
			</div>
		</div>
		<div class="personal-form_line">
			<span>生日：</span>
			<span class="preview-active">{{birthdate}}</span>
			<div class="edit-active">
				<select name="year" class="year">
					
				</select>
				<select name="month" class="month">
					
				</select>
				<select name="day" class="day">
					
				</select>
			</div>
		</div>
		<div class="personal-form_line">
			<span>手机号码：</span>
			<span class="preview-active">{{phone}}</span>
			<div class="edit-active">
				<span id="personal_phone" name="phone" type="text" class="personal-form_input">{{phone}}</span>
				<button class="personal-form_modify-btn">修改</button>
			</div>
		</div>
		<div class="personal-form_line">
			<span>电子邮箱：</span>
			<span class="preview-active">{{email}}</span>
			<div class="edit-active">
				<input name="email" id="personal_email" type="text" class="personal-form_input" value="{{email}}">
				<!-- <button class="personal-form_modify-btn">修改</button> -->
			</div>
		</div>
		<div class="personal-form_line edit-active">
			<button class="personal-form_cancel-btn">取消</button>
			<button type="submit" class="personal-form_save-btn">保存</button>
		</div>
		<button class="personal-form_edit-btn preview-active">编辑</button>
		
	</form>
</script>
<!-- TODO 联系人列表 -->
<script type="text/template" id="two">
	{{each data as value i}}
	<li class="common_ul" data-id={{ value.id }}>
		<div class="common_title clearfix">
			<h3 class="common_name">{{value.name}}</h3>
			<span class="glyphicon common_remove_icon" type="button" data-target="#myModal"><img src="${pageContext.request.contextPath}/static/pcsofangche/my/myorderlist/img/del.png" width="14" height="14"></span>
			<span class="glyphicon common_edit_icon"><img src="${pageContext.request.contextPath}/static/pcsofangche/my/myorderlist/img/edit.png" width="15" height="15" style="margin-top:-1px"></span>
		</div>
		<div class="common_show">
			<p>手机号码 ：{{value.phone}}</p>
			<p>证件类型 ：{{value.type}}</p>
			<p>证件号码 ：{{value.num}}</p>
			<p>电子邮箱 ：{{value.email}}</p>
		</div>
	</li>
	{{/each}}
</script>
<!-- TODO common编辑联系人 -->
<script type="text/template" id="three">
	{{each data as value i}}
	<form class="form-horizontal" id="Modify_Contacts">
			<div class="form-group">
				<label for="inputEmail3" class="col-sm-2 control-label">姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名 ：</label>
				<div class="col-sm-10">
					<input id="common_username" type="name" name="cname" class="form-control" value="{{value.name}}">
					<input type="hidden" name="id" value="{{value.id}}">
				</div>
			</div>
			<div class="form-group">
				<div class="col-sm-offset-2 col-sm-10">
					<div class="checkbox">
						<label class="radio-inline">
								<input type="radio" name="sex" value="男" {{value.sex == "男"? "checked" : "" }}> 先生
						</label>
						<label class="radio-inline">
								<input type="radio" name="sex" value="女" {{value.sex == "女"? "checked" : "" }}> 女士
						</label>
					</div>
				</div>
			</div>
			<div class="form-group">
				<label for="inputEmail3" class="col-sm-2 control-label">出生年月 ：</label>
				<div class="col-sm-10">
					<select name="year" class="birthYear">
						
					</select>年
					<select name="month" class="birthMonth">
						
					</select>月
					<select name="day" class="birthDay">
						
					</select>日
				</div>
			</div>
			<div class="form-group">
				<label for="inputEmail3" class="col-sm-2 control-label">证件类型 ：</label>
				<div class="col-sm-10">
					<select id="papers" value="{{value.type}}" name="identtype">
						<option value="{{value.type}}">{{value.type}}</option>
					</select>
				</div>
			</div>
			<div class="form-group">
				<label for="inputEmail3" class="col-sm-2 control-label">证件号码 ：</label>
				<div class="col-sm-10">
					<input id="common_papers" type="name" name="identnum" class="form-control" value="{{value.num}}">
				</div>
			</div>
			<div class="form-group">
				<label for="inputEmail3" class="col-sm-2 control-label">手机号码 ：</label>
				<div class="col-sm-10">
					<input id="common_phone" type="name" name="phone" class="form-control" value="{{value.phone}}">
				</div>
			</div>
			<div class="form-group">
				<label for="inputEmail3" class="col-sm-2 control-label">电子邮箱 ：</label>
				<div class="col-sm-10">
					<input id="common_email" type="name" name="email" class="form-control" value="{{value.email}}">
				</div>
			</div>
			<div class="btn_last">
				<label class="col-sm-2" class="no_before"></label>
				<div class="col-sm-10 new_btn">
					<span class="news_cancel">取消</span>
					<span class="news_sava" id="edit_save">保存</span>
				</div>
			</div>
		</form>
	{{/each}}
</script>

<script>
	var pwd = document.querySelector('#set_pwd');
	var dengji = document.querySelector('#pwd_dengji');
	pwd.oninput = function () {
		var str = this.value;
		if (str.length >= 6) {
			//  定义三个正则对象分别表示检测数字、字母和特殊符号
			var regNum = /\d/;    // 数字
			var regWord = /[a-zA-Z]/; // 字母
			var regOther = /[^a-zA-Z0-9]/; // 特殊符号
			//  定义一个变量表示等级 默认为0
			var num = 0;

			//  检测判断确定等级     1 2 3
			if (regNum.test(str)) {
				num++;
			}
			if (regWord.test(str)) {
				num++;
			}
			if (regOther.test(str)) {
				num++;
			}
			// 7. 根据等级添加类名 r  z  q
			switch (num) {
				case 1:
					dengji.className = 'r';
					break;
				case 2:
					dengji.className = 'z';
					break;
				case 3:
					dengji.className = 'q';
					break;
			}
		} else {  // 隐藏所有的span
			dengji.className = 'h';
		}
	}


</script>